<!DOCTYPE HTML>
<html lang="zxx">

<head>
    <title>登录</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
    <script>
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- Meta tag Keywords -->

    <!-- css files -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!-- Style-CSS -->
    <link href="css/font-awesome.min.css" rel="stylesheet">
    <!-- Font-Awesome-Icons-CSS -->
    <!-- //css files -->

</head>

<body>
    <div class="main-bg" id="mian">
        <!-- title -->
        <h1>县级信访系统</h1>
        <!-- //title -->
        <div class="sub-main-w3">
            <div class="image-style">

            </div>
            <!-- vertical tabs -->
            <div class="vertical-tab">
                <div id="section1" class="section-w3ls">
                    <input type="radio" name="sections" id="option1" checked>
                    <label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
                    <article>
                        <form action="#" method="post">
                            <h3 class="legend">账号登录</h3>
                            <div class="input">
                                <span class="fa fa-user-o" aria-hidden="true"></span>
                                <input type="text" v-model="logindata.username" placeholder="账号" name="username" required />
                            </div>
                            <div class="input">
                                <span class="fa fa-key" aria-hidden="true"></span>
                                <input type="password" v-model="logindata.password" placeholder="密码" name="password" required />
                            </div>
                            <button type="button" class="btn submit" @click="login">登 录</button>
                            <a href="#" class="bottom-text-w3ls">忘记密码?</a>
                        </form>
                    </article>
                </div>
                <div id="section2" class="section-w3ls">
                    <input type="radio" name="sections" id="option2">
                    <label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
                    <article>
                        <form action="#" method="post">
                            <h3 class="legend">注册帐户</h3>
                            <div class="input">
                                <span class="fa fa-user-o" aria-hidden="true"></span>
                                <input type="text" v-model="registerdata.username" placeholder="账号" name="username" required />
                            </div>
                            <div class="input">
                                <span class="fa fa-key" aria-hidden="true"></span>
                                <input type="password" v-model="registerdata.password" placeholder="密码" name="password" required />
                            </div>
                            <div class="input">
                                <span class="fa fa-key" aria-hidden="true"></span>
                                <input type="password" v-model="registerdata.confirmPassword" placeholder="确认密码" name="confirmPassword" required />
                            </div>
                            <button type="button" class="btn submit" @click="register">注 册</button>
                        </form>
                    </article>
                </div>
                <div id="section3" class="section-w3ls">
                    <input type="radio" name="sections" id="option3">
                    <label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
                    <article>
                        <form action="#" method="post">
                            <h3 class="legend last">重置密码</h3>
                            <p class="para-style">请在下面输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
                            <p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#">#</a></p>
                            <div class="input">
                                <span class="fa fa-envelope-o" aria-hidden="true"></span>
                                <input type="email" v-model="forgetdata.email" placeholder="邮箱" name="email" required />
                            </div>
                            <button type="submit" class="btn submit last-btn">提交</button>
                        </form>
                    </article>
                </div>
            </div>
            <!-- //vertical tabs -->
            <div class="clear"></div>
        </div>
        <!-- copyright -->
        <div class="copyright">
            <h2>县级信访系统平台 &copy; 2021 - {{nowYear}} 版权所有| 姚
                <a href="#">镇彬</a>
            </h2>
        </div>
        <!-- //copyright -->
    </div>

</body>
<!-- script   -->
<script src="js/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- JavaScript 代码需要放在尾部（指定的HTML元素之后） -->
<script>
    new Vue({
        el: '#mian',
        data: {
            nowYear: new Date().getFullYear(),
            logindata: {
                username: '',
                password: ''

            },
            registerdata: {
                username: '',
                password: '',
                confirmPassword: '',
            },
            forgetdata: {
                email: '',
            }
        },
        methods: {
            register() {
                axios.post("http://localhost:5453/user/regist?confirmPassword=" + this.confirmPassword, this.registerdata).then(res => {
                    console.log(res.data.data);
                    if (res.data.data) {

                        location.href = "/static/login.html"
                    } else {
                        alert("注册失败");
                    }
                });
            },
            login() {
                axios.post("http://localhost:5453/user/login", this.logindata).then(res => {
                    console.log(res.data.data);
                    if (res.data.data) {

                        location.href = location.origin + '/#/home'


                    } else {
                        console.log(1);
                        alert("登陆失败,用户名或密码错误");
                    }
                })
            }
        },
        created() {

        }
    });
</script>
<!-- //script -->

</html>